<template>
  <div class="uploadBox">
    <!-- 返回主页 -->
    <div class="homeBox">
        <router-link to="/home/familyInfo">
            <el-button type="info">返回到列表首页</el-button>
        </router-link>
    </div>
    <!-- 上传文件按钮 -->
    <!-- 
        action:必须传，可以不指定上传地址
        accept：可以选择上传文件的类型
        auto-upload：
        show-file-list：不展示上传文件列表
        on-change：选择的文件改变了，或者添加文件、上传成功和上传失败时都会被调用
     -->
    <div class="buttonBox">
        <el-upload
          action
          accept=".xlsx,.xls"
          :auto-upload="false"
          :show-file-list="false"
          :on-change="handle"
        >
          <el-button type="primary">选取EXCEL文件</el-button>
        </el-upload>
        <el-button type="success" @click="submit">采集数据提交</el-button>
    </div>
  </div>
  <!-- 解析出来的数据 -->
  <div class="tableBox" v-show="show">
        <h3>以下是采集完成的数据，请检查无误后，点击“采集数据提交”按钮上传至服务器！</h3>
        <el-table :data="tempData.data" border style="width: 100%">
      <el-table-column prop="name" label="姓名" align="center" />
      <el-table-column prop="father" label="父亲" align="center" />
      <el-table-column prop="mother" label="母亲" align="center" />
      <el-table-column prop="Telephone" label="联系电话" align="center" />
      <el-table-column prop="address" label="家庭住址" align="center" />
    </el-table>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
// 引入读取文件封装的方法
import { readFile,character } from '@/utils/fileFamily'
// 解析Excel表格
import xlsx from 'xlsx'
import { ElMessage,ElLoading } from "element-plus";
import {addFamilyInfos} from '@/api/api'
// 定义数据
let tempData = reactive({
    data:[]
})
// 控制表格展示不展示
const show = ref(false)
// 采集Excel数据,handle方法会默认传一个事件对象
const handle = async(ev)=>{
    console.log(ev)
    // 此时有文件才处理，没有文件就不需要处理
    let file = ev.raw
    if(!file) return;
    show.value = false;//每一次解析文件之前隐藏表格
    
     // 加载
  const loadingInstance = ElLoading.service({
    text:'稍等正在处理！',
    background:'rgba(0,0,0,.5)'
  })
    // 读取file中的数据(最终变为json格式)
    let data = await readFile(file);//把我们上传的文件以二进制的方式进行读取
    // excel表格解析(创建一个相当于Excel表格的数据表workbook)
    let workbook = xlsx.read(data,{type:'binary'})//读取二进制数据
    console.log(workbook)
    // 从Excel表格中拿到第一个目录中的数据
    let worksheet = workbook.Sheets[workbook.SheetNames[0]]
    // 把拿到的数据解析为json格式
    data = xlsx.utils.sheet_to_json(worksheet)
    console.log(data)
    // 把读取出来的数据变为最后可以传递给服务器的数据(姓名：name。。。)
    let arr = [];   //定义一个空数组，用来存储最终要拿的项
    data.forEach(item => {  //遍历data数据
        let obj = {};
        for(let key in character){//遍历字段
            if(!character.hasOwnProperty(key)) break;
            let v = character[key]
               let text = v.text
               let type = v.type
               v = item[text] || '',
               type === 'string'?(v = String(v)) : null;
               type === 'number'?(v = Number(v)) : null;
            obj[key] = v
        }
        arr.push(obj)
    });
    console.log(arr)
    // 解析文件之后将表格展示到页面
    show.value = true
    // 将我们得到的数据赋值
    tempData.data = arr
    loadingInstance.close()
}
// 提交数据给服务器
const submit = async()=>{
    if(tempData.data.length <= 0){//判断是否选择了Excel文件
        ElMessage({
            message:'请先选择EXCEL文件！',
            type:'warning'
        })
        return;
    }
    // 完成后处理的事情
    const complete = () => {
      ElMessage({
        message: "数据已经上传完成",
        type: "success",
      });
      show.value = false;
    };
    // 需要把数据一条条传递给服务器
    let n = 0;//记录给服务器多少条数据了
    let send = async () => {
        // 什么时候结束
      if (n > tempData.data.length - 1) {
        // 都传递完了
        complete();
        return;
      }
      let body = tempData.data[n];//传给服务器的内容
      let result = await addFamilyInfos(body);
      console.log("数据", result);
      if (result.data.code === 0) {
        // 成功
        n++;
      }
      send();//执行下一次
    };
    send(); 
}
</script>

<style lang="less" scoped>
.uploadBox{
    display: flex;
    flex-direction: row;
    .homeBox .el-button{
        width: 150px;
        height: 50px;
        margin: 20px;
    }
    .buttonBox{
        display: flex;
        flex-direction: row;
        .el-button{
            width: 150px;
            height: 50px;
            margin: 20px;
        }
    }
}
</style>>

